<template>
  <section class="content" id="modal-order-confirm">
    <div class="creat-order-container ">
      <div class="for-print">
      <!--名称-->
      <div class="title-box">
        <p class="page-title" style="font-size:20px;">订单详情</p>
      </div>
      <!--订单信息-->
      <div class="order-info-box">
        <div class="title-name">
          <p class="name" style="font-size:20px;">订单信息 <i @click="infoShow = !infoShow" style="float: right" :class="infoShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
        </div>
        <div v-if="infoShow" class="info-order">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">订单编号：</span></p>
                <div class="content-desc">{{orderInfo.platformOrderId}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">订单时间：</span></p>
                <div class="content-desc">{{orderInfo.orderTime}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span> 销售记录号：</span></p>
                <div class="content-desc">{{orderInfo.record}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">币种：</span></p>
                <div class="content-desc">{{orderInfo.currency}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 订单渠道：</span></p>
                <div class="content-desc">{{handleChoseChannel(orderInfo.orderChannelSelect)}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">店铺：</span></p>
                <div class="content-desc">{{orderInfo.storeName}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 订单金额：</span></p>
                <div class="content-desc">{{orderInfo.loansReceivable}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span >邮资：</span></p>
                <div class="content-desc">{{orderInfo.thePostageReceivable}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span> 平台费用：</span></p>
                <div class="content-desc">{{orderInfo.costOfPlatform}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">转帐费：</span></p>
                <div class="content-desc">{{orderInfo.transitionFee}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 收款账号：</span></p>
                <div class="content-desc">{{orderInfo.shroffAccountNum}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span>付款时间：</span></p>
                <div class="content-desc">{{orderInfo.payTime}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span> 退补类型：</span></p>
                <div class="content-desc">{{orderInfo.treatTypeName}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">退补金额：</span></p>
                <div class="content-desc">{{orderInfo.treatMoney}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span> 物流渠道：</span></p>
                <div class="content-desc" v-for="item in logisticsList" :key="item.code" v-if="item.code == orderInfo.logistics">{{item.codeValue}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span>物流单号：</span></p>
                <div class="content-desc">{{orderInfo.billCode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span> 申报类型：</span></p>
                <div class="content-desc">{{returnOrderType(orderInfo.orderType)}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span>申报关区代码：</span></p>
                <div class="content-desc">{{orderInfo.customsNo}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 分运单号：</span></p>
                <div class="content-desc">{{orderInfo.assbillNo}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 大包裹号：</span></p>
                <div class="content-desc">{{orderInfo.bigPackageNo}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 小包数量：</span></p>
                <div class="content-desc">{{orderInfo.smallPackageNo}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 支付交易流水号：</span></p>
                <div class="content-desc">{{orderInfo.payNo}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 平台留言：</span></p>
                <div class="content-desc">{{message}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class=""> 订单备注：</span></p>
                <div class="content-desc">{{remark}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--留言和备注-->
    <!--  <div class="message-remark">
        <div class="left-message">
          <div class="title-name">
            <p class="name">平台留言</p>
          </div>
          <div class="text-area">
            {{message}}
          </div>

        </div>
        <div class="right-remark">
          <div class="title-name">
            <p class="name">订单备注</p>
          </div>
          <div class="text-area">
            {{remark}}
          </div>

        </div>
      </div>-->
      <!--客户信息-->
      <div class="client-info">
        <div class="title-name">
          <p class="name" style="font-size:20px;">客户信息 <i @click="clientShow = !clientShow" style="float: right" :class="clientShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
        </div>
        <div v-if="clientShow" class="client-content">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">客户ID：</span></p>
                <div class="content-desc">{{customerInfo.buyerId}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">客户姓名：</span></p>
                <div class="content-desc">{{customerInfo.firstName}}-{{customerInfo.lastName}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">收货人：</span></p>
                <div class="content-desc">{{customerInfo.receiverFirstName}}-{{customerInfo.receiverLastName}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">联系电话：</span></p>
                <div class="content-desc">{{customerInfo.contactNumFrist}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span>联系电话2：</span></p>
                <div class="content-desc">{{customerInfo.contactNumSec}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">联系邮箱：</span></p>
                <div class="content-desc">{{customerInfo.contactEmail}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">所属国家：</span></p>
                <div class="content-desc">{{customerInfo.countryName}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">省/州：</span></p>
                <div class="content-desc">{{customerInfo.provincialState}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">所属城市：</span></p>
                <div class="content-desc">{{customerInfo.city}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span>邮编：</span></p>
                <div class="content-desc">{{customerInfo.postcode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <p class="second"><span class="">门牌号：</span></p>
                <div class="content-desc">{{customerInfo.houseNum}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span class="">邮寄地址：</span></p>
                <div class="content-desc">{{customerInfo.mailingAddress}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <p><span>备用地址：</span></p>
                <div class="content-desc">{{customerInfo.standbyAddress}}</div>
              </div>
            </el-col>
            <el-col :span="8"> <div class="grid-content">
            </div>

            </el-col>
            <el-col :span="8">
              <div class="grid-content">
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="goods-info">
        <div class="title-name">
          <p class="name" style="font-size:20px;">商品信息 <i @click="goodsShow = !goodsShow" style="float: right" :class="goodsShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
        </div>
        <div v-if="goodsShow" class="goods-table">
          <div class="add-goods">
            <!--<el-button type="primary" @click="addPdocutc">添加商品</el-button>-->
          </div>
          <el-table :data="productInfo.productList"  style="width: 100%">
            <el-table-column prop="erpSku" label="商品SKU" width="240">
            <!--  <template slot-scope="scope">
                <el-input placeholder="请输入内容" disabled v-model="scope.row.erpSku" class="input-with-select">
                  <el-button type="primary"   v-if="!modal"
                             @click="chooseProduct(scope.$index)" slot="append">选择</el-button>
                  <el-button type="primary"  data-toggle="modal" v-if="modal"  data-target="#modal-default"
                             @click="chooseProduct(scope.$index)" slot="append">选择</el-button>
                </el-input>
              </template>-->
            </el-table-column>
            <el-table-column prop="sku" label="平台SKU" width="180">
            <!--  <template slot-scope="scope">
                <el-input v-model="scope.row.sku" disabled placeholder=""></el-input>
              </template>-->
            </el-table-column>
            <el-table-column prop="price" label="单价">
             <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.price"  placeholder=""></el-input>
              </template>-->
            </el-table-column>
            <el-table-column prop="quantity" label="发货数量">
             <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.quantity"  placeholder=""></el-input>
              </template>-->
            </el-table-column>
        <!--    <el-table-column  label="操作">
              <template slot-scope="scope">
                <i class="el-icon-delete"  @click="deleteProduct(scope.$index)"></i>
              </template>
            </el-table-column>-->
          </el-table>
        </div>
       </div>
      </div>
      <div class="buttons">
        <el-button type="primary" @click="print">打 印</el-button>
        <!--<el-button type="primary" v-if="!isEdited" @click="continueAddOrderDetail(2)">继续添加</el-button>-->
        <el-button @click="closeBack">返 回</el-button>
      </div>
    </div>

  </section>

</template>

<script>
  import instance from '@/api/index.js'

  export default {
    name: 'orderDetailPage',
    data() {
    return {
      disabled: false,//店铺可选标识
      accountDisabled: false,//收款账号可选标识
      orderInfo: {//订单信息
        platformOrderId: null,//平台交易号
        orderTime: '',//订单时间
        orderChannel: [],//订单渠道
        orderChannelSelect: null,//订单渠道选择
        store: [],//店铺
        storeSelect: null,//店铺选择
        loansReceivable: '',//应收货款
        thePostageReceivable: null,//应收邮资
        costOfPlatform: '',//平台费用
        transitionFee: null,//转账费
        shroffAccountNum: '',//收款账号
        payTime: '',//付款时间
        record:null,//销售记录号
        treatMoney:null,//退补金额
        billCode:'',//物流单号
        logistics:'',//物流渠道
        customsNo:null,//申报关区代码
        payNo:null,//支付交易流水号
        currency:'',//货币代码
        treatType:'',
        orderType: 1,
        assbillNo:'',
        bigPackageNo:'',
        smallPackageNo:'',
        storeName:''
      },
      customerInfo: {//客户信息
        buyerId: '',//客户ID buyerId
        firstName: '',//客户姓名
        lastName: '',//客户姓名
        receiverFirstName:'',//
        receiverLastName:'',//
        contactNumFrist: null,//联系电话1
        contactNumSec: null,//联系电话2
        contactEmail: '',//联系邮箱
        homeCountry: '',//所属国家
        homeCountrySelectCode: '',//所属国家选择 code
        homeCountrySelectName:'',//所属国家选择 name
        provincialState: '',//省/洲
        city: '',//所属城市
        postcode: null,//邮编
        houseNum: '',//门牌号
        mailingAddress: '',//邮寄地址
        standbyAddress: '',//备用地址
        countryName:'',
        treatTypeName:''
      },
      message:'',//平台留言说明
      remark:'',//订单备注
      productInfo: {//商品信息
        productList: [],//商品列表
      },
      currencyList:[],//币种列表
      checkProduct: [],
      orderDetailInfo: {
        platformOrderId: '',
        channel: '',
        account: '',
        total: null,
        storeId: null,
        payTimeStr: '',
        buyerId: '',
        name: '',
        phone: '',
        otherPhone: '',
        country: '',
        countryName: '',
        state: '',
        city: '',
        postalCode: '',
        street1: '',
        street2: '',
        mail: '',
        houseNumber: '',
        platformFee: '',
        transferFee: '',
        remark: '',
        orderCreated: '',
        shipping: null,
        items: []
      },
      addPdocutcList: [],
      productParams: {},
      pages: {
        total: 0,
        current: 1,
        display: 10,
      },
      indexProduct: '',//获取下标
      errorShow: false,//错误显示
      errorMsg: '',//错误信息
      errorTitle: '',//错误提示标题
      errorClass: false,//错误样式
      accoutList:[],
      styleObj:{background:'#F5F7FA'},
      retreatingType:[],
      modal:'',
      orderIdEdited:'',
      isEdited:false,
      infoShow:true,
      platShow:true,
      markShow:true,
      clientShow:true,
      goodsShow:true,
      logisticsList:[],
    }

  },
    methods: {
      returnOrderType: function (_key) {
        let orderType= new Map();//订单状态
        orderType.set(0, "非9610报关单模式");
        orderType.set(1, "9610模式");
        orderType.set(2, "非9610物流单模式");
        return orderType.get(_key);
      },
      /*选择国家之后赋值国家名称*/
      handleDealCountry(){
        this.customerInfo.homeCountry.forEach((item,index)=>{
          if (item.code == this.homeCountrySelectCode){
            this.homeCountrySelectName = item.name;
          }
        })
      },
      //获取平台列表或者下拉框
      getPlatFormList: function () { //获取平台列表或者下拉框
        let vm = this;
        vm.disabled = true;
        vm.accountDisabled = true;
        instance({
          method: 'post',
          url: '/v1/author/getPlatFrom'
        }).then(function (data) {
          if (data.data.success) {
            vm.orderInfo.orderChannel = data.data.data;
          }
        });
      },
      //店铺变化收款账号也变化
      changeShop: function () {
        let vm = this;
        if (!vm.orderInfo.storeSelect) {
          vm.accountDisabled = true;
          vm.accoutList = [];
          return;
        }
        vm.accountDisabled = false;
        for(let i = 0; i < vm.orderInfo.store.length; i++){
          if(vm.orderInfo.storeSelect == vm.orderInfo.store[i].id){
            vm.accoutList = vm.orderInfo.store[i].accounts;
          }
        }
      },
      //订单渠道变化店铺也变化
      changeChanner: function () {
        let vm = this;
        if (!vm.orderInfo.orderChannelSelect) {
          vm.disabled = true
          this.modal = false
          return;
        }
        this.modal = true
        vm.disabled = false;
        vm.getStore(vm.orderInfo.orderChannelSelect);
      },

      //提交订单
      submitOrderDetail: function (sourceFlag) {
        let vm = this;
        //校验数据；
        if (!vm.orderInfo.platformOrderId) {
          vm.$alert('请输入订单编号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.smallPackageNo) {
          vm.$alert('请输入小包数量！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.bigPackageNo) {
          vm.$alert('请输入大包裹号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.currency) {
          vm.$alert('请选择币种！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.transitionFee) {
          vm.$alert('请输入转会费！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.shroffAccountNum) {
          vm.$alert('请输入收款账号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.treatMoney) {
          vm.$alert('请输入退补金额！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.contactEmail) {
          vm.$alert('请输入联系邮箱！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.houseNum) {
          vm.$alert('请输入门牌号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.assbillNo) {
          vm.$alert('请输入分运单号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.orderTime) {
          vm.$alert('请输入订单时间！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.orderChannelSelect) {
          vm.$alert('请选择订单渠道！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.storeSelect) {
          vm.$alert('请选择店铺！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.orderInfo.loansReceivable) {
          vm.$alert('请输入订单金额！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (vm.orderInfo.orderType == 1) {
          if (!vm.orderInfo.customsNo){
            vm.$alert('请输入申报关区代码！', '提示', {
              confirmButtonText: '确定',
            });
            return;
          }
        }
        if (!vm.customerInfo.buyerId) {
          vm.$alert('请输入客户ID！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.firstName) {
          vm.$alert('请输入客户姓名！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.lastName) {
          vm.$alert('请输入客户姓名！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.receiverFirstName) {
          vm.$alert('请输入收货人！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.customerInfo.receiverLastName) {
          vm.$alert('请输入收货人！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if(!vm.customerInfo.contactNumFrist) {
          vm.$alert('请输入联系电话！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if (!vm.productInfo.productList || vm.productInfo.productList.length == 0) {
          vm.$alert('请添加商品！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        } else {

          for (var k = 0; k < vm.productInfo.productList.length; k++) {
            let product = vm.productInfo.productList[k];
            if (!product.sku) {
              vm.$alert('请输入平台sku！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            }
            if (!product.erpSku) {
              vm.$alert('请输入系统sku！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            }
            if (!product.price) {
              vm.$alert('请输入商品单价！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            }
            if (!product.quantity) {
              vm.$alert('请输入发货数量！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            }
          }
        }
        if(!vm.customerInfo.homeCountrySelectCode) {
          vm.$alert('请输入所属国家！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if(!vm.customerInfo.provincialState) {
          vm.$alert('请输入省/州！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if(!vm.customerInfo.city) {
          vm.$alert('请输入所属城市！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if(!vm.customerInfo.mailingAddress) {
          vm.$alert('请输入邮寄地址！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        if(!vm.orderInfo.payNo) {
          vm.$alert('请输入支付交易流水号！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }


        //验证完毕组合数据   platformOrderId
        vm.orderDetailInfo.platformOrderId = vm.orderInfo.platformOrderId;// 订单编号
        vm.orderDetailInfo.channel = vm.orderInfo.orderChannelSelect;// 订单渠道
        vm.orderDetailInfo.total = vm.orderInfo.loansReceivable;// 应收货款
        vm.orderDetailInfo.storeId = vm.orderInfo.storeSelect;// 商店
        vm.orderDetailInfo.payTimeStr = vm.orderInfo.payTime;// 付款时间
        vm.orderDetailInfo.orderCreated = vm.orderInfo.orderTime;// 订单时间
        vm.orderDetailInfo.buyerId = vm.customerInfo.buyerId;// 客户id
        vm.orderDetailInfo.customerFirstName = vm.customerInfo.firstName;// 名
        vm.orderDetailInfo.customerLastName = vm.customerInfo.lastName;// 姓
        vm.orderDetailInfo.receiverFirstName = vm.customerInfo.receiverFirstName;
        vm.orderDetailInfo.receiverLastName = vm.customerInfo.receiverLastName;
        vm.orderDetailInfo.phone = vm.customerInfo.contactNumFrist;// 联系电话
        vm.orderDetailInfo.otherPhone = vm.customerInfo.contactNumSec;// 联系电话
        vm.orderDetailInfo.country = vm.customerInfo.homeCountrySelectCode;// 国家
        vm.orderDetailInfo.countryName = vm.customerInfo.homeCountrySelectName;// 国家名称
        vm.orderDetailInfo.state = vm.customerInfo.provincialState;// 省/州
        vm.orderDetailInfo.city = vm.customerInfo.city;// 城市
        vm.orderDetailInfo.postalCode = vm.customerInfo.postcode;// 邮编 postalCode
        vm.orderDetailInfo.street1 = vm.customerInfo.mailingAddress;// 邮寄地址
        vm.orderDetailInfo.street2 = vm.customerInfo.standbyAddress;// 备用地址
        vm.orderDetailInfo.platformFee = vm.orderInfo.costOfPlatform;// 平台服务费
        vm.orderDetailInfo.transferFee = vm.orderInfo.transitionFee;// 转账费
        vm.orderDetailInfo.account = vm.orderInfo.shroffAccountNum;// 收款账户
        vm.orderDetailInfo.mail = vm.customerInfo.contactEmail;// 邮箱
        vm.orderDetailInfo.houseNumber = vm.customerInfo.houseNum;// 门牌号
        vm.orderDetailInfo.postage = vm.orderInfo.thePostageReceivable;// 运费
        vm.orderDetailInfo.message = this.message;
        vm.orderDetailInfo.remark = this.remark;
        /* vm.orderDetailInfo.items.splice(0);*/
        vm.orderDetailInfo.items=[];
        /*     vm.productInfo.productList.forEach(function (product, index) {
            /!*   let item = {
                 price: product.unitPrice,//单价
                 sku: product.ebaySKU,//sku
                 goodsId: product.goodsId, //系统商品id
                 quantity: product.shipmentsNum, //数量
                 stockId: product.warehouseSelect //仓库id
               }*!/
             /!*  vm.orderDetailInfo.items.push(item);*!/
             })*/
        vm.orderDetailInfo.items = vm.productInfo.productList;
        Object.assign( vm.orderDetailInfo,vm.productInfo,vm.orderInfo,vm.customerInfo)
        let api = '';
        if (this.isEdited){
          api = `/v1/order/confirm/${this.orderIdEdited}`
        }else {
          api = '/v1/order/create'
        }
        instance({
          method: 'post',
          url: api,
          data: vm.orderDetailInfo
        }).then(function (data) {
          if (data.data.success) {
            vm.$alert('添加手工订单成功！', '提示', {
              confirmButtonText: '确定',
            });
            if (sourceFlag == 1){
              vm.$router.back();
            }
            //后清空数据
            vm.message = '';
            vm.remark = '';
            for (var key in vm.orderInfo) {
              if (key != 'orderChannel' && key != 'store') {
                vm.orderInfo[key] = '';
              }
            }
            for (var key in vm.customerInfo) {
              if (key != 'homeCountrySelectCode') {
                vm.orderInfo[key] = '';
              }
            }
            vm.productInfo.productList.splice(0);
          } else {
            vm.$alert('添加手工订单失败！', '提示', {
              confirmButtonText: '确定',
            });
          }
        })
      },
      //继续添加
      continueAddOrderDetail: function (souce) {
        let vm = this;
        //先提交订单
        this.submitOrderDetail(souce);

      },

      //定时信息提示
      setTime: function () {
        let vm = this;
        setTimeout(function () {
          vm.errorShow = false;
        }, 2500)
      },

      //关闭信息提示
      closeError: function () {
        this.errorShow = false;
      },

      //获取授权平台下的店铺
      getStore: function (_id) {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/author/getAuthorShopList',
          data: {
            id: _id,
            status: 1
          }
        }).then(function (data) {
          if (data.data.success) {
            vm.orderInfo.store = data.data.data;
          }
        })
      },

      //获取国家信息
      getCountry: function () {
        let vm = this;
        instance({
          method: 'post',
          url: 'v1/ebay/meta/country/getList',
        }).then(function (data) {
          console.log(data)
          if (data.data.success) {
            vm.customerInfo.homeCountry = data.data.data
          }
        })
      },

      //根据sku查仓库
      getStorage: function (_sku) {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/warehouse/getGoodsStockInfoList',
          data: {
            sku: _sku
          }
        }).then(function (data) {
        })
      },

      //添加商品
      addPdocutc: function () {
        let vm = this;
        let productObj = {quantity:null,erpSku:'',price:null,sku:''};
        vm.productInfo.productList.push(productObj);
        vm.productInfo.productList.forEach((item,index)=>{
          vm.productInfo.productList[index].quantity = parseInt(item.quantity)
        })
      },

      //删除商品
      deleteProduct: function (_index) {
        this.productInfo.productList.splice(_index, 1);
      },

      searchProduct(){
        let vm = this;
        vm.checkProduct = [];
        vm.productParams.rows = 5;
        vm.productParams.page = vm.pages.current;
        vm.pages.display = vm.productParams.rows;
        let api = `v1/goodsRelation/listGoods?page=${vm.pages.current}`
        if (this.productParams.erpSku) {
          api = api + `&erpSku=${this.productParams.erpSku}`
        }
        if(this.orderInfo.orderChannelSelect){
          api = api + `&channel=${this.orderInfo.orderChannelSelect}`
        } else {
          vm.$alert('请选择订单渠道！', '提示', {
            confirmButtonText: '确定',
          });
          return
        }
        instance({
          method: 'get',
          url: api
        }).then(function (data) {
          if (data.data.success) {
            vm.addPdocutcList = data.data.data.list;
            vm.pages.total = data.data.data.pages;
          }
        });
      },
      resetProduct(){
        let vm = this;
        vm.checkProduct = [];
        vm.productParams.rows = 5;
        vm.productParams.erpSku = '';
        vm.productParams.page = vm.pages.current;
        vm.pages.display = vm.productParams.rows;
        let api = `v1/goodsRelation/listGoods?page=${vm.pages.current}`
        if (this.productParams.erpSku) {
          api = api + `&erpSku=${this.productParams.erpSku}`
        }
        if(this.orderInfo.orderChannelSelect){
          api = api + `&channel=${this.orderInfo.orderChannelSelect}`
        } else {
          vm.$alert('请选择订单渠道！', '提示', {
            confirmButtonText: '确定',
          });
          return
        }
        instance({
          method: 'get',
          url: api
        }).then(function (data) {
          if (data.data.success) {
            vm.addPdocutcList = data.data.data.list;
            vm.pages.total = data.data.data.pages;
          }
        });
      },

      //选择产品
      chooseProduct: function (_index) {
        let vm = this;
        vm.checkProduct = [];
        vm.productParams.rows = 5;
        vm.productParams.erpSku = '';
        vm.productParams.page = vm.pages.current;
        vm.pages.display = vm.productParams.rows;
        console.log(vm.productParams)
        let api = `v1/goodsRelation/listGoods?page=${vm.pages.current}`
        if (this.productParams.erpSku) {
          api = api + `&erpSku=${this.productParams.erpSku}`
        }
        if(this.orderInfo.orderChannelSelect){
          api = api + `&channel=${this.orderInfo.orderChannelSelect}`
        } else {
          vm.$alert('请选择订单渠道！', '提示', {
            confirmButtonText: '确定',
          });
          return
        }
        instance({
          method: 'get',
          url: api,
        }).then(function (data) {
          if (data.data.success) {
            vm.addPdocutcList = data.data.data.list;
            vm.pages.total = data.data.data.pages;
            vm.indexProduct = _index;
          }
        });
      },

      // 获取分页
      pagechange: function (currentPage) {
        this.pages.current = currentPage;
        this.productParams.pages = currentPage;
        this.chooseProduct();
      },

      //保存
      submitProduct: function () {
        if (this.checkProduct.length == 0) {
          /*   this.errorClass = false;
             this.errorShow = true;*/
          this.$alert('请选择一个商品！', '提示', {
            confirmButtonText: '确定',
          });
          /*    this.errorTitle = "选择商品";
              this.errorMsg = "请选择一个商品";*/
          /*this.setTime();*/
          return;
        }
        if (this.checkProduct.length > 1) {
          /*  this.errorClass = false;
            this.errorShow = true;*/
          this.$alert('请选择一个商品！', '提示', {
            confirmButtonText: '确定',
          });
          /* this.errorTitle = "选择商品";
           this.errorMsg = "只能选择一个商品";*/
          /* this.setTime();*/
          return;
        }
        this.productInfo.productList[this.indexProduct].erpSku = this.checkProduct[0].erpSku;
        this.productInfo.productList[this.indexProduct].sku = this.checkProduct[0].sku;
        this.productInfo.productList[this.indexProduct].goodsId = this.checkProduct[0].id;
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/warehouse/getGoodsStockInfoList',
          data: {
            sku: vm.checkProduct[0].sku
          }
        }).then(function (data) {
          console.log(data)
          if (data.data.success) {
            for (let i = 0; i < data.data.data.length; i++) {
              vm.productInfo.productList[vm.indexProduct].warehouse = data.data.data[i].stockInfoVOS;
            }
          }
        })
      },

      //选择发货仓库后仓库库存已发货数量比较
      chooseWh: function (_id) {
        let wh = this.productInfo.productList[this.indexProduct].warehouse;
        let index = wh.findIndex(function (item) {
          return item.whId == _id
        });
        let stockQty = this.productInfo.productList[this.indexProduct].warehouse[index]["stockQty"];
        this.productInfo.productList[this.indexProduct].stockQty = stockQty;
        let shipmentsNum = this.productInfo.productList[this.indexProduct].shipmentsNum;
        if (shipmentsNum > stockQty) {
          this.errorClass = false;
          this.errorShow = true;
          this.errorTitle = "发货仓库库位错误";
          this.errorMsg = "发货仓库库存少于发生数量，清重新选择";
          this.setTime();
          return;
        }
      },

      //选择发货仓库后仓库库存已发货数量比较
      blurShipmentsNum: function (_indexNum) {
        let stockQty = this.productInfo.productList[this.indexProduct].stockQty;
        let shipmentsNum = this.productInfo.productList[this.indexProduct].shipmentsNum;
        if (shipmentsNum > stockQty) {
          this.errorClass = false;
          this.errorShow = true;
          this.errorTitle = "发货仓库库位错误";
          this.errorMsg = "发货仓库库存少于发生数量，清重新选择";
          this.setTime();
          return;
        }
      },

      //添加库存商品
      addInventory: function (_obj) {
        let productObj = {};
        productObj.pic = _obj.pic;
        productObj.productInfo = _obj.productInfo;
        productObj.sku = _obj.sku;
        productObj.ebaySKU = '';
        productObj.unitPrice = '';
        productObj.warehouse = _obj.warehouse;
        productObj.warehouseSelect = '';
        productObj.shipmentsNum = '';
        productObj.stockQty = '';
        this.productInfo.productList.push(productObj);
        console.log(productObj)
      },
      closeBack(){
        this.$router.push(`/v1/order/list`)
      },
      getCurrency(){
        let api = '/v1/dict/currency';
        instance({
          method:'get',
          url:api
        }).then((res)=>{
          if (res.data.success){
            this.currencyList = res.data.data
          }
        })
      },
      //获取退补类型
      getRetreatingType() {
        let vm = this;
        instance.get('/v1/dict/charge').then(function (data) {
          vm.retreatingType = data.data.data;
        })
      },
      handleChoseChannel(flag){
        switch (flag) {
          case 1:
            return 'ebay';
            break;
          case 2:
            return 'Amazon';
            break;
          case 3:
            return 'magento';
            break;
          case 4:
            return '其他';
            break;
          default:
            return '其他'
            break;
        }
      },
      getDetail(id){
        let api = `/v1/order/get/${id}`;
        instance({
          method:'get',
          url:api
        }).then((res)=>{
          if (res.data.success){
            let result = res.data.data;
            this.orderInfo.platformOrderId = result.platformOrderId
            this.orderInfo.orderTime = result.orderCreated
            this.orderInfo.record = result.record
            this.orderInfo.currency = result.currency
            this.orderInfo.orderChannelSelect = result.channel
            if (this.orderInfo.orderChannelSelect) {
              this.modal = true
            }else {
              this.modal = false
            }
            this.orderInfo.storeSelect = result.storeId
            this.orderInfo.loansReceivable = result.total
            this.orderInfo.thePostageReceivable = result.postage
            this.orderInfo.costOfPlatform = result.platformFee
            this.orderInfo.transitionFee = result.transferFee
            this.orderInfo.shroffAccountNum = result.account
            this.orderInfo.payTime = result.payTimeStr
            this.orderInfo.treatType = result.treatType
            this.orderInfo.treatMoney = result.treatMoney
            this.orderInfo.logistics = result.logistics
            this.orderInfo.billCode = result.billCode
            this.orderInfo.orderType = result.orderType
            this.orderInfo.customsNo = result.customsNo
            this.orderInfo.assbillNo = result.assbillNo
            this.orderInfo.bigPackageNo = result.bigPackageNo
            this.orderInfo.smallPackageNo = result.smallPackageNo
            this.orderInfo.payNo = result.payNo
            this.orderInfo.storeName = result.storeName
            this.message = result.message
            this.remark = result.remark
            this.customerInfo.buyerId = result.buyerId
            this.customerInfo.firstName = result.customerFirstName
            this.customerInfo.lastName = result.customerLastName
            this.customerInfo.receiverFirstName = result.receiverFirstName
            this.customerInfo.receiverLastName = result.receiverLastName
            this.customerInfo.contactNumFrist = result.phone
            this.customerInfo.contactNumSec = result.otherPhone
            this.customerInfo.contactEmail = result.mail
            this.customerInfo.homeCountrySelectCode = result.country
            this.customerInfo.provincialState = result.state
            this.customerInfo.city = result.city
            this.customerInfo.postcode = result.postalCode
            this.customerInfo.houseNum = result.houseNumber
            this.customerInfo.mailingAddress = result.street1
            this.customerInfo.standbyAddress = result.street2
            this.customerInfo.countryName = result.countryName
            this.productInfo.productList = result.items || []
            this.retreatingType.forEach((item,index)=>{
              if (result.treatType == item.code) {
                this.orderInfo.treatTypeName = item.codeValue
              }
            })
            this.customerInfo.homeCountry.forEach((item,index)=>{
              if (result.country == item.code) {
                this.customerInfo.countryName = item.name
              }
            })
          }
        })
      },
      print: function() {
        let str =`<style>.creat-order-container {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}
.creat-order-container .title-box {
  padding: 0 20px;
}
.creat-order-container .title-box .page-title {
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  line-height: 63px;
  border-bottom: 1px solid #E4E7ED;
}
.creat-order-container .order-info-box {
  margin: 18px 20px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}
.creat-order-container .order-info-box .info-order {
  margin: 20px;
}
.creat-order-container .order-info-box .info-order .el-row {
  margin-bottom: 15px;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content {
  display: flex;
  align-items: center;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content p {
  width: 180px;
  display: inline-block !important;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  /*    &.second{
                width: 150px;
              }*/

}
.el-row > div > div > p, .el-row > div > div > div{
  display: inline-block;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content p span.need {
  display: inline-block;
  position: relative;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content p span.need:before {
  content: '*';
  position: absolute;
  left: -8px;
  top: 0;
  color: red;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content div.content-desc {
  display: inline-block !important;
  font-size: 14px;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content .el-select {
  width: 100%;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content .el-radio-group {
  width: 100%;
}
.creat-order-container .order-info-box .info-order .el-row .grid-content .el-radio-group .el-radio {
  margin-right: 10px;
  display: inline-block;
}
.creat-order-container .message-remark {
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.creat-order-container .message-remark .left-message,
.creat-order-container .message-remark .right-remark {
  width: 49.166%;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}
.creat-order-container .message-remark .left-message .text-area,
.creat-order-container .message-remark .right-remark .text-area {
  width: 100%;
  padding: 20px;
}
.creat-order-container .client-info {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  margin: 20px;
}
.creat-order-container .client-info .client-content {
  margin: 20px;
}
.creat-order-container .client-info .client-content .el-row {
  margin-bottom: 15px;
}
.creat-order-container .client-info .client-content .el-row .grid-content {
  display: flex;
  align-items: center;
  justify-content: left;
}
.creat-order-container .client-info .client-content .el-row .grid-content p {
  width: 100px;
  display: inline-block;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
}
.creat-order-container .client-info .client-content .el-row .grid-content p span.need {
  display: inline-block;
  position: relative;
}
.creat-order-container .client-info .client-content .el-row .grid-content p span.need:before {
  content: '*';
  position: absolute;
  left: -8px;
  top: 0;
  color: red;
}
.creat-order-container .client-info .client-content .el-row .grid-content span.content {
  color: #606266;
  font-size: 20px;
  display: inline-block;
}
.creat-order-container .client-info .client-content .el-row .grid-content .el-select {
  width: 100%;
}
.creat-order-container .client-info .client-content .el-row .grid-content .client {
  width: 100%;
}
.creat-order-container .client-info .client-content .el-row .grid-content .client .client-name {
  width: 48%;
}
.creat-order-container .client-info .client-content .el-row .grid-content .el-radio-group {
  width: 100%;
}
.creat-order-container .client-info .client-content .el-row .grid-content .el-radio-group .el-radio {
  margin-right: 10px;
  display: inline-block;
}
.creat-order-container .goods-info {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  margin: 0 20px 20px 20px;
}
.creat-order-container .goods-info .goods-table {
  margin: 20px;
}
.creat-order-container .goods-info .goods-table .buttons {
  text-align: center;
  margin-top: 40px;
}
.creat-order-container .goods-info .goods-table .el-icon-delete {
  color: #409EFF;
  font-size: 20px;
}
.creat-order-container .goods-info .goods-table .el-table {
  margin-top: 15px;
}
.creat-order-container .goods-info .goods-table .el-table thead {
  background-color: #F5F7FA;
}
.creat-order-container .goods-info .goods-table .el-table thead tr {
  background-color: #F5F7FA;
}
.creat-order-container .goods-info .goods-table .el-table thead tr th {
  background-color: #F5F7FA;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.creat-order-container .goods-info .goods-table .el-table tbody tr td {
  text-align: center;
}
.creat-order-container .goods-info .goods-table .el-table tbody tr td .el-input {
  width: 80%;
}
.creat-order-container .goods-info .goods-table .el-table .input-with-select {
  width: 200px !important;
}
.creat-order-container .title-name {
  position: relative;
  line-height: 43px;
  padding: 0 18px;
}
.creat-order-container .title-name:before {
  content: '';
  position: absolute;
  height: 62%;
  width: 1px;
  border-left: 2px solid #409EFF;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
}
.creat-order-container .title-name .name {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  line-height: 43px;
  border-bottom: 1px solid #E4E7ED;
}
.creat-order-container .modal-header {
  background: #fff;
  position: relative;
  /* &:after{
         content: '';
         position: absolute;
         height: 1px;
         width: 80%;
         border-bottom: 1px solid;
         bottom: 0;

       }*/

}
.creat-order-container .modal-footer {
  text-align: center;
}
.creat-order-container .form-horizontal .form-control {
  width: 320px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px 4px 0px 4px;
  border: 1px solid #dcdfe6;
  margin-right: 15px;
}
.creat-order-container .form-horizontal .el-button {
  width: 68px;
  height: 40px;
}
.creat-order-container .form-horizontal .table-bordered {
  border: none;
}
.creat-order-container .form-horizontal .table-bordered thead tr th {
  height: 60px;
  background: #f5f7fa;
  border: none;
}
.creat-order-container .form-horizontal .table-bordered tbody tr {
  border-bottom: 1px solid #E4E7ED;
}
.creat-order-container .form-horizontal .table-bordered tbody tr td {
  border: none;
}
.el-table::before{
 height:0
}

</style>`;
        let $div = $("#modal-order-confirm .for-print").clone().prepend(str);
        this.handleprint($div[0]);
      },
      handleprint(myDiv){
        let printHtml = myDiv.innerHTML;//这个元素的样式需要用内联方式，不然在新开打印对话框中没有样式
        let wind = window.open("",'newwindow', 'height=800, width=1000, top=100, left=100, toolbar=yes, menubar=no, scrollbars=yes, resizable=no,location=n o, status=no');
        wind.document.body.innerHTML = printHtml;
        let cssLink = document.createElement('link')
        cssLink.href = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
        cssLink.rel = 'stylesheet'
        wind.document.head.appendChild(cssLink)
        let jsLink = document.createElement('script')
        jsLink.src = 'https://unpkg.com/element-ui/lib/index.js'
        wind.document.body.appendChild(jsLink)
        setTimeout(()=>{wind.print();},1000)
        return false;
      },
      getLogistics(){
        let api = '/v1/dict/logistics';
        instance({
          method:'get',
          url:api
        }).then((res)=>{
          if (res.data.success){
            this.logisticsList = res.data.data
          }
        })
      },
    },
    created() {
    //获取平台列表或者下拉框
    this.getPlatFormList();

    //获取授权平台下的店铺
    this.getStore(this.orderInfo.orderChannelSelect);

    //获取国家信息
    this.getCountry();
    this.getLogistics();
    //
    this.getStorage("SMK123456");
    this.getCurrency();
    this.getRetreatingType();
    this.orderIdEdited =  this.$route.query.orderId;
    console.log(this.$route.query.orderId)
      if ( this.orderIdEdited) {
        this.getDetail(this.orderIdEdited )
      }
  },
    computed: {
/*      platformOrderId() {
        return this.orderInfo.platformOrderId;
      },
      loansReceivable() {
        return this.orderInfo.loansReceivable;
      },
      thePostageReceivable() {
        return this.orderInfo.thePostageReceivable;
      },
      costOfPlatform() {
        return this.orderInfo.costOfPlatform;
      },
      transitionFee() {
        return this.orderInfo.transitionFee;
      },
      time() {
        return this.orderInfo.time;
      },*/
    },
    watch: {
      // platformTransactionNum: function () {
      //   this.orderInfo.platformTransactionNum = this.orderInfo.platformTransactionNum.replace(/[^0-9]/g, '');
      // },
 /*     loansReceivable: function () {
        this.orderInfo.loansReceivable = this.orderInfo.loansReceivable.replace(/[^0-9\.]/g, '');
      },
      thePostageReceivable: function () {
        this.orderInfo.thePostageReceivable = this.orderInfo.thePostageReceivable.replace(/[^0-9\.]/g, '');
      },
      costOfPlatform: function () {
        this.orderInfo.costOfPlatform = this.orderInfo.costOfPlatform.replace(/[^0-9\.]/g, '');
      },
      transitionFee: function () {
        this.orderInfo.transitionFee = this.orderInfo.transitionFee.replace(/[^0-9\.]/g, '');
      },
      time: function () {
        this.orderInfo.payTime = this.orderInfo.payTime.replace(/[^0-9\.\-]/g, '');
        this.orderInfo.orderTime = this.orderInfo.orderTime.replace(/[^0-9\.\-]/g, '');
      },*/
    },
  }
</script>
<style  lang="less">

  .creat-order-container{
    .buttons{
      text-align: center;
      margin-top: 40px;
    }
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    border:1px solid rgba(228,231,237,1);
    padding-bottom: 40px;
    .title-box{
      padding: 0 20px;
      .page-title{
        font-size:16px;
        font-weight:400;
        color:rgba(48,49,51,1);
        line-height: 63px;
        border-bottom: 1px solid #E4E7ED;
      }
    }
    .order-info-box{
      margin: 18px 20px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      .info-order{
        margin: 20px;
        .el-row{
          margin-bottom: 15px;
          .grid-content{
            p{
              width: 180px;
              display: inline-block;
              text-align: right;
              font-size:14px;
              font-weight:600;
              color:rgba(96,98,102,1);
              span.need{
                display: inline-block;
                position: relative;
                &:before{
                  content: '*';
                  position: absolute;
                  left: -8px;
                  top: 0;
                  color: red;
                }
              }

            }
            div.content-desc{
              display: inline-block;
              width: 100%;
              font-size: 14px;
            }
            display: flex;
            align-items: center;
            .el-select{
              width: 100%;
            }
            .el-radio-group{
              width: 100%;
              .el-radio{
                margin-right: 10px;
                display: inline-block;
              }
            }
          }
        }
      }
    }
    .message-remark{
      margin: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-message,.right-remark{
        width: 49.166%;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
        border-radius:4px;
        border:1px solid rgba(228,231,237,1);
        .text-area{
          width: 100%;
          padding: 20px;
        }
      }
    }

    .client-info{
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      margin: 20px;
      .client-content{
        margin: 20px;
        .el-row{
          margin-bottom: 15px;
          .grid-content{
            p{
              width: 180px;
              display: inline-block;
              text-align: right;
              font-size:14px;
              font-weight:600;
              color:rgba(96,98,102,1);
              span.need{
                display: inline-block;
                position: relative;
                &:before{
                  content: '*';
                  position: absolute;
                  left: -8px;
                  top: 0;
                  color: red;
                }
              }
            }
            span.content{
              color: #606266;
              font-size: 20px;
              display: inline-block;
            }
            div.content-desc{
              display: inline-block;
              width: 100%;
              font-size: 14px;
            }
            display: flex;
            align-items: center;
            justify-content: left;
            .el-select{
              width: 100%;
            }
            .client{
              width: 100%;
              .client-name{
                width: 48%;
              }
            }

            .el-radio-group{
              width: 100%;
              .el-radio{
                margin-right: 10px;
                display: inline-block;
              }
            }
          }
        }
      }
    }

    .goods-info{
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      margin: 0 20px 20px 20px;
      .goods-table{
        margin: 20px;

        .el-icon-delete{
          color: #409EFF;
          font-size: 20px;
        }
        .el-table{
          margin-top: 15px;
          thead{
            background-color: #F5F7FA;
            tr{
              background-color: #F5F7FA;
              th{
                background-color: #F5F7FA;
                height: 60px;
                line-height: 60px;
                text-align: center;
              }
            }
          }
          tbody{
            tr{
              td{
                text-align: center;
                .el-input{
                  width: 80%;
                }
              }
            }
          }
          .input-with-select{
            width: 200px !important;
          }
        }
      }
    }
    .title-name{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        height: 62%;
        width: 1px;
        border-left: 2px solid #409EFF;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
      }
      line-height: 43px;
      padding: 0 18px;
      .name{
        font-size:16px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height: 43px;
        border-bottom: 1px solid #E4E7ED;

      }
    }
    .modal-header{
      background: #fff;
      position: relative;
      /* &:after{
         content: '';
         position: absolute;
         height: 1px;
         width: 80%;
         border-bottom: 1px solid;
         bottom: 0;

       }*/
    }
    .modal-footer{
      text-align: center;
    }
    .form-horizontal{
      .form-control{
        width:320px;
        height:40px;
        background:rgba(255,255,255,1);
        border-radius:4px 4px 0px 4px;
        border:1px solid rgba(220,223,230,1);
        margin-right: 15px;
      }
      .el-button{
        width:68px;
        height:40px;
      }
      .table-bordered{
        border: none;
        thead{
          tr{
            th{
              height:60px;
              background:rgba(245,247,250,1);
              border: none;
            }
          }
        }
        tbody{
          tr{
            border-bottom:  1px solid #E4E7ED;
            td{
              border:none;
            }
          }
        }
      }
    }
  }
  .linehe > input{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__inner{
    line-height: 40px!important;
    height: 40px!important;
  }
  .el-date-editor.el-input{
    width: 100%!important;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  /* 火狐 */
  input{
    -moz-appearance:textfield;
  }
</style>
